<template>
  <div>
    <device-info-overview :total="total" :device="deviceInfo" :data="chartsData" />
    <alarm-realtime-infomation :api="alarmListApi" />
  </div>
</template>

<script>
import deviceInfoOverview from '@/components/device-info-overview'
import alarmRealtimeInfomation from '@/components/alarm-realtime-infomation'
import {
  totalApi,
  alarmListApi
} from '@/api/'

export default {
  data() {
    return {
      alarmListApi,
      total: 0,
      deviceInfo: [],
      chartsData: [],
    }
  },
  components: {
    deviceInfoOverview,
    alarmRealtimeInfomation
  },
  methods: {
    loadDeviceInfo() {
      totalApi().then(res => {
        const { cameraNum, deviceNum, drivingNum, offlineRatio, onlineRatio, trolleyNum } = res.data.data
        this.deviceInfo = [
          { name: '摄影机', value: cameraNum },
          { name: '行车PLC', value: drivingNum },
          { name: '台车PLC', value: trolleyNum }
        ]
        this.total = deviceNum
        this.chartsData = [
          { name: '在线', value: parseFloat(onlineRatio) / 100 * deviceNum, ratio: onlineRatio },
          { name: '离线', value: parseFloat(offlineRatio) / 100 * deviceNum, ratio: offlineRatio },
        ]
      }).catch(() => {})
    }
  },
  mounted() {
    this.loadDeviceInfo()
  }
}
</script>

<style lang="scss" scoped>
</style>